<template>
  <div>
    <h3>App组件</h3>
    <!-- 
      如是你现在在自定义组件标签中间写内容，然后想在组件中使用，则一定要用到组件插槽
      插槽好处：不但传数据而且还可以定义数据显示的结构
     -->
    <child>
      <!-- 默认插槽此方案去使用，推荐的 -->
      <!-- <div>我是child双标签中间的内容</div> -->
      <!-- vue2.6之后有一个新的写法 -->
      <!-- <template v-slot:default> -->
      <!-- v-slot插槽可能在定义组件时，使用挺多，所以提供一个简写 # -->
      <!-- 默认插槽在一个自定义组件中，只能定义一次,所以也把默认插槽称为 单个插槽 -->
      <template #default>
        <div>我是child双标签中间的内容</div>
      </template>
      <template #title>
        <h1>标题</h1>
      </template>
      <template #icon>
        <div>图标</div>
      </template>
    </child>
    <!-- <hr /> -->
    <!-- <child /> -->
  </div>
</template>

<script>
import child from './components/child/index.vue'
export default {
  components: {
    child
  }
}
</script>

<style lang="scss" scoped></style>
